<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>中国地图</title>
    <!-- 引入 ECharts 文件 -->
<!--    <link rel="stylesheet" type="text/css" href="css/China.css" />-->
<!--    <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
<!--    <script src="js/map/js/china.js"></script>-->
    <script type="text/javascript" th:src="@{/main_js/echarts.min1.js}"></script>
    <script type="text/javascript" th:src="@{/main_js/china1.js}"></script>
</head>
<body>

<div id="map-layer"></div>
<canvas id="light-piller-layer" width="1680" height="1000"></canvas>
<canvas id="icon-layer" ; width="1680" height="1000"></canvas>
</body>
</html>
<script type="text/javascript">
    var showMap = {
        "北京": {
            name: "北京市",
            rank: 1,
            position: [116.405285, 39.904989],
            city: [{
                name: '顺义',
                rank: 2
            },
                {
                    name: '大兴',
                    rank: 1
                },
                {
                    name: '海淀',
                    rank: 1
                }
            ]
        },
        "天津": {
            name: "天津市",
            rank: 2,
            position: [117.190182, 39.125596],
            city: [{
                name: '顺义',
                rank: 2
            },
                {
                    name: '大兴',
                    rank: 1
                },
                {
                    name: '海淀',
                    rank: 1
                }
            ]
        },
        "云南": {
            name: "云南省",
            rank: 2,
            position: [102.702913, 25.050202],
            city: [{
                name: '昆明',
                rank: 4
            },
                {
                    name: '曲靖',
                    rank: 2
                }
            ]
        },
        "西藏": {
            name: "西藏省",
            rank: 3,
            position: [88.112616, 31.668426],
            city: [{
                name: '拉萨',
                rank: 1
            }, ]
        },
        "黑龙江": {
            name: "黑龙江省",
            rank: 4,
            position: [128.60352, 47.758573],
            city: [{
                name: '哈尔滨',
                rank: 4
            },
                {
                    name: '大兴',
                    rank: 2
                },
                {
                    name: '齐齐哈尔',
                    rank: 1
                },
                {
                    name: '吼吼',
                    rank: 3
                },
                {
                    name: '吼吼',
                    rank: 3
                }
            ]
        },
    }

    var changeMap
    changeMap = JSON.parse(JSON.stringify(showMap))

    var mapLayer = echarts.init(document.getElementById("map-layer"));
    var lightPillerLayer = document.getElementById("light-piller-layer")
    var iconLayer = document.getElementById("icon-layer")

    var lightPillerLayerConText = lightPillerLayer.getContext("2d");
    var iconLayerContext = iconLayer.getContext("2d");
    // 使用刚指定的配置项和数据显示图表
    option = {
        backgroundColor: "#00041e", //画布背景颜色
        animation: false,
        geo: [{
            id: 'geo1',
            zlevel: 2, //geo显示级别，默认是0
            map: 'china', //地图名
            roam: true, //设置为false,不启动roam就无所谓缩放拖曳同步了
            zoom: 1.1, //缩放级别
            itemStyle: { //顶层地图的样式，如地图区域颜色，边框颜色，边框大小等
                normal: {
                    areaColor: '#08407D',
                    borderColor: '#00FFFF',
                    borderWidth: 0.5
                }
            },
        },
            {
                id: 'geo2',
                map: 'china', //地图名
                roam: true, //设置为false,不启动roam就无所谓缩放拖曳同步了
                zoom: 1.1, //缩放级别
                showLegendSymbol: false,
                itemStyle: { //顶层地图的样式，如地图区域颜色，边框颜色，边框大小等
                    areaColor: 'rgba(245,248,254,0.4)',
                    borderWidth: 1, //设置外层边框
                    shadowColor: 'rgba(150,202,236, 0.9)',
                    shadowOffsetX: -5,
                    shadowOffsetY: 10,
                    opacity: 1,
                    shadowBlur: 15
                }
            }
        ],
    }

    var geo2, geo3, mapLayerClick, mapLayerMousemove = false,
        mapLayerGeoroam = false
    mapLayer.on('georoam', function(params) {
        // 控制台打印数据的名称
        // console.log(params);
        mapLayerGeoroam=true
        var option = mapLayer.getOption(); //获得option对象
        // console.log(option);
        if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
            if (option.geo.length == 2) {
                option.geo[1].zoom = option.geo[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
                option.geo[1].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
            }
        } else { //捕捉到拖曳时
            // mapLayer.clear()
            // if (option.geo[1].center == null || option.geo[1].center != option.geo[0].center) {
            // geo3=option
            if (mapLayerMousemove) {
                if (option.geo.length == 2) {
                    geo2 = option.geo[1]
                } else {
                    geo2.center = option.geo[0].center;
                }
                option.geo = option.geo[0]
            }
        }
        mapLayer.setOption(option, true); //设置option
        // mapLayer.setOption(option); //设置option
    });

    mapLayer.on("mousemove", function() {
        if (mapLayerClick) {
            mapLayerMousemove = true
        } else {
            mapLayerMousemove = false
        }
    });

    mapLayer.on("mousedown", function() {
        // if (mapLayerClick == false) {
        // 	mapLayerClick = true
        // }
        mapLayerClick = true
        // console.log("mousedown")
    });

    mapLayer.on("mouseup", function() {
        var option = mapLayer.getOption();
        console.log(option)
        if(option.geo.length==1){
            if(mapLayerGeoroam==true){
                mapLayerGeoroam=false
                option.geo.push(geo2)
                mapLayer.setOption(option, true);
            }
        }
        console.log(option)
        mapLayerClick = false
        console.log("mouseup")
    });

    mapLayer.setOption(option, true);

    var img = new Image();
    var timer = null,
        disktimer = null
    var name
    var validateName;
    var iconPosition
    mapLayer.on('click', function(params) {
        validateName = params.name;
        if (showMap[validateName]) {
            name = params.name
            clearInterval(timer)
            clearInterval(disktimer)
            iconLayerContext.clearRect(0, 0, iconLayer.width, iconLayer.height)
            if (changeMap[name]) {
                changeMap = JSON.parse(JSON.stringify(showMap))
                delete(changeMap[name])
                timer = setInterval(function() {
                    //这儿放要执行的代码, 参数在外面准备好
                    iconAnimation(iconPosition)
                }, 20)
                sumY = 1
                disktimer = setInterval(function() {
                    iconPosition = mapLayer.convertToPixel('geo', showMap[name].position)
                    //这儿放要执行的代码, 参数在外面准备好
                }, 150)
                // cityName.innerText = showMap[name].name;
            } else {
                changeMap = JSON.parse(JSON.stringify(showMap))
            }
        }
    });

    var disk = {
        angle: 10
    }

    var iconChange = {
        abeam: 22,
        portrait: 9,
        height: 26
    }

    function iconDraw(iconPosition) {
        iconLayerContext.beginPath();
        iconPosition = mapLayer.convertToPixel('geo', showMap[name].position)
        var styleColor
        if (showMap[name].rank == 1) {
            styleColor = {
                r: 50,
                g: 181,
                b: 115
            }
        } else if (showMap[name].rank == 2) {
            styleColor = {
                r: 241,
                g: 188,
                b: 26
            }
        } else if (showMap[name].rank == 3) {
            styleColor = {
                r: 255,
                g: 152,
                b: 0
            }
        } else {
            styleColor = {
                r: 233,
                g: 63,
                b: 69
            }
        }

        iconLayerContext.strokeStyle = 'rgba(' + styleColor.r + ',' + styleColor.g + ',' + styleColor.b + ',0.2)';
        // BezierEllipse1(iconLayerContext, iconPosition[0], iconPosition[1] + 12, 6, 2);
        BezierEllipse1(iconLayerContext, iconPosition[0], iconPosition[1], 6, 2);
        iconLayerContext.fillStyle = 'rgba(' + styleColor.r + ',' + styleColor.g + ',' + styleColor.b + ',0.4)';
        iconLayerContext.fill();
        iconLayerContext.closePath();

        iconLayerContext.beginPath();
        iconLayerContext.strokeStyle = 'rgba(' + styleColor.r + ',' + styleColor.g + ',' + styleColor.b + ',0.6)';
        // BezierEllipse1(iconLayerContext, iconPosition[0], iconPosition[1] + 12, iconChange.abeam, iconChange.portrait);
        BezierEllipse1(iconLayerContext, iconPosition[0], iconPosition[1], iconChange.abeam, iconChange.portrait);

        if (showMap[name].rank == 1) {
            img.src = "./img/icon1.png";
        } else if (showMap[name].rank == 2) {
            img.src = "./img/icon2.png";
        } else if (showMap[name].rank == 3) {
            img.src = "./img/icon3.png";
        } else {
            img.src = "./img/icon4.png";
        }
        // iconLayerContext.drawImage(img, iconPosition[0] - 21, iconPosition[1] - iconChange.height, 40, 40);
        iconLayerContext.drawImage(img, iconPosition[0] - 21, iconPosition[1] - iconChange.height - 12, 40, 40);
        iconLayerContext.closePath();
    }

    var iconAdd, iconHeight

    function iconMove() {
        if (Math.floor(iconChange.abeam) == 16) {
            iconAdd = +0.1
        } else if (Math.floor(iconChange.abeam) == 22) {
            iconAdd = -0.1
        }
        if (Math.floor(iconChange.height) == 26) {
            iconHeight = +0.1
        } else if (Math.floor(iconChange.height) == 30) {
            iconHeight = -0.1
        }
        iconChange.abeam = iconChange.abeam + iconAdd
        iconChange.portrait = iconChange.portrait + iconAdd
        iconChange.height = iconChange.height + iconHeight
    }

    function iconAnimation(iconPosition) {
        iconMove(); //更新
        iconLayerContext.clearRect(0, 0, iconLayer.width, iconLayer.height); //清除
        iconDraw(iconPosition); //绘制
    }

    var change = {
        light: 40,
        abeam: 11,
        portrait: 5
    }

    var lightAdd, abearAdd

    function move() {
        if (change.light == 40) {
            lightAdd = +1
        } else if (change.light == 100) {
            lightAdd = -1
        }
        change.light = change.light + lightAdd

        if (Math.floor(change.abeam) == 11) {
            abearAdd = +0.1

        } else if (Math.floor(change.abeam) == 18) {
            abearAdd = -0.1
        }
        // console.log(change.abeam)
        change.abeam = change.abeam + abearAdd
        change.portrait = change.portrait + abearAdd
    }


    function draw() {

        echarts.util.each(changeMap, function(dataItem, idx) {
            var geoCoord = showMap[idx].position;
            var coord = mapLayer.convertToPixel('geo', geoCoord);
            var linkColor = {
                r: 50,
                g: 181,
                b: 115
            }
            if (showMap[idx].rank == 1) {
                linkColor = {
                    r: 50,
                    g: 181,
                    b: 115
                }
            } else if (showMap[idx].rank == 2) {
                linkColor = {
                    r: 241,
                    g: 188,
                    b: 26
                }
            } else if (showMap[idx].rank == 3) {
                linkColor = {
                    r: 255,
                    g: 152,
                    b: 0
                }
            } else {
                linkColor = {
                    r: 233,
                    g: 63,
                    b: 69
                }
            }

            var grd = lightPillerLayerConText.createLinearGradient(coord[0] - 10, coord[1] + 9, coord[0], coord[1] - 81);
            grd.addColorStop(0, "rgba(" + linkColor.r + "," + linkColor.g + "," + linkColor.b + "," + change.light / 100 +
                ")");
            grd.addColorStop(1, "rgba(255,255,255,0)");
            lightPillerLayerConText.shadowColor = "rgba(" + linkColor.r + "," + linkColor.g + "," + linkColor.b + "," +
                change
                    .light / 100 + ")";
            lightPillerLayerConText.shadowOffsetX = 0;
            lightPillerLayerConText.shadowOffsetY = 10;
            lightPillerLayerConText.shadowBlur = 50;
            lightPillerLayerConText.beginPath();
            lightPillerLayerConText.fillStyle = grd;
            //绘制矩形
            // lightPillerLayerConText.fillRect(coord[0] - 8, coord[1] + 9, 16, -80);
            lightPillerLayerConText.fillRect(coord[0] - 8, coord[1], 16, -80);
            lightPillerLayerConText.closePath();

            lightPillerLayerConText.beginPath();
            lightPillerLayerConText.fillStyle = "rgba(" + linkColor.r + "," + linkColor.g + "," + linkColor.b + ",1)";
            lightPillerLayerConText.strokeStyle = "rgba(" + linkColor.r + "," + linkColor.g + "," + linkColor.b + ",0.6)";
            // BezierEllipse1(lightPillerLayerConText, coord[0], coord[1] + 9, 8, 2);
            BezierEllipse1(lightPillerLayerConText, coord[0], coord[1], 8, 2);
            lightPillerLayerConText.fill();
            lightPillerLayerConText.closePath()

            lightPillerLayerConText.beginPath();
            lightPillerLayerConText.lineWidth = 1;
            lightPillerLayerConText.strokeStyle = "rgba(" + linkColor.r + "," + linkColor.g + "," + linkColor.b + ",0.4)";
            // BezierEllipse1(lightPillerLayerConText, coord[0], coord[1] + 9, change.abeam, change.portrait);
            BezierEllipse1(lightPillerLayerConText, coord[0], coord[1], change.abeam, change.portrait);
            lightPillerLayerConText.closePath();
        })
    }

    function animation() {
        move(); //更新
        lightPillerLayerConText.clearRect(0, 0, lightPillerLayer.width, lightPillerLayer.height); //清除
        draw(); //绘制
        requestAnimationFrame(animation); //循环
    }

    animation()

    // setInterval(animation, 200)

    function BezierEllipse1(context, x, y, a, b) {
        //关键是bezierCurveTo中两个控制点的设置
        //0.5和0.6是两个关键系数（在本函数中为试验而得）
        var ox = 0.5 * a,
            oy = 0.6 * b;
        context.save();
        context.translate(x, y);
        context.beginPath();
        //从椭圆纵轴下端开始逆时针方向绘制
        context.moveTo(0, b);
        context.bezierCurveTo(ox, b, a, oy, a, 0);
        context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
        context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
        context.bezierCurveTo(-a, oy, -ox, b, 0, b);
        context.closePath();
        context.stroke();
        context.restore();
    };

</script>

